<template>
  <div class="common-layout" style="margin-left: -300px;">
    <el-container>
      <el-header>

        <div class="f-header">

          <span class="logo">

            <img src="../assets/logo.png" alt="logo" style="margin-left: -30px;height: 55px;">

          </span>
          <span style="font-size:xx-large;">
            MES REWORK{{ current_station_click }}
          </span>

          <div class="ml-auto flex items-center" style="margin-right: 30px;">
            <span class="flex items-center text-light-50" style="font-size: large;">
              {{ getUserName() }}
            </span>
            <span class="flex items-center text-light-50 exit" style="font-size: large;" @click="open">
              <img src="../assets/exit.png" alt="logo" style="margin-left: 5px;height: 25px;">
              Exit
            </span>
          </div>

        </div>

      </el-header>
      <el-main style="width: 100%;margin-top: -40px;padding: 0;">

        <el-container>
          <el-aside width="150px">
            <div style="background-color:white;">
              <el-row class="tac" style="height: 880px;margin-left: -20px;margin-top:20px;">
                <el-col :span="24">
                  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                      <template #title>
                        <img src="../assets/Search.png" alt="logo" style="margin-left: 5px;height: 20px;">
                        <span style="margin-left: 9px;font-weight:bold;font-size: large;">Query</span>
                      </template>

                      <el-menu-item index="1-1"><el-button type="success"
                          class="station_btn">OP155-1</el-button></el-menu-item>
                      <el-menu-item index="1-2"><el-button type="success"
                          class="station_btn">OP155-2</el-button></el-menu-item>
                      <el-menu-item index="1-3"><el-button type="success"
                          class="station_btn">OP160-1A</el-button></el-menu-item>
                      <el-menu-item index="1-4"><el-button type="success"
                          class="station_btn">OP160-1B</el-button></el-menu-item>
                      <el-menu-item index="1-5"><el-button type="success"
                          class="station_btn">OP160-2A</el-button></el-menu-item>
                      <el-menu-item index="1-6"><el-button type="success"
                          class="station_btn">OP160-2B</el-button></el-menu-item>
                      <el-menu-item index="1-7"><el-button type="success"
                          class="station_btn">OP162-1A</el-button></el-menu-item>
                      <el-menu-item index="1-8"><el-button type="success"
                          class="station_btn">OP162-1B</el-button></el-menu-item>
                      <el-menu-item index="1-9"><el-button type="success"
                          class="station_btn">OP162-2A</el-button></el-menu-item>
                      <el-menu-item index="1-10"><el-button type="success"
                          class="station_btn">OP162-2B</el-button></el-menu-item>
                      <el-menu-item index="1-11"><el-button type="success"
                          class="station_btn">OP167-1</el-button></el-menu-item>
                      <el-menu-item index="1-12"><el-button type="success"
                          class="station_btn">OP167-2</el-button></el-menu-item>
                    </el-sub-menu>

                  </el-menu>
                </el-col>

              </el-row>
            </div>
          </el-aside>
          <el-main style="width: 1700px;">
            <el-row :gutter="10" style="background-color: #EDEDED;margin-left: 0px;height: 80px;">
              <el-col :span="3">
                <!-- <div class="grid-content ep-bg-purple" style="background-color:chocolate">
                  <el-button type="success" class="search_btn" style="font-size: 20px;" @click="onSubmit"><span
                      style="color: black;">Search</span></el-button>
                </div> -->
                <div class="grid-content ep-bg-purple">
                  <el-button type="success" class="search_btn" style="font-size: 20px;" @click="onSubmit"><span
                      style="color: black;">Search</span></el-button>
                </div>
              </el-col>
              <el-col :span="18" style="margin-left: 0px;">
                <div class="grid-content ep-bg-purple"
                  style="background-color:white;display: flex;align-items: center;justify-content: left;height: 70px;">
                  <!-- <el-input style="width: 650px;margin-left: 5px;" placeholder="Product ID" /> -->
                  <input v-model="psnValue" type="text"
                    style="width: 650px;height: 35px;border: 2px solid #718022ad;margin-left: 5px;border-radius:5px;"
                    placeholder="Product ID">
                  <el-input style="width: 580px;border: 2px solid #718022ad;margin-left: 10px;border-radius:7px;" v-model="current_station_plc_triggering_time" />
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="grid-content ep-bg-purple" style="background-color:white;display: flex;align-items: center;justify-content: center;height: 80px;">
                  <el-input style="width: 350px;" placeholder="time" />
                </div>
              </el-col> -->
              <el-col :span="3">
                <!-- <div class="grid-content ep-bg-purple" style="background-color:chocolate;">
                  <el-button type="success" class="clear_options_btn" style="font-size: 20px;" @click="clickClear"><span
                      style="color: black;">Clear
                      options</span></el-button>
                </div> -->
                <div class="grid-content ep-bg-purple" >
                  <el-button type="success" class="clear_options_btn" style="font-size: 20px;" @click="clickClear"><span
                      style="color: black;">Clear
                      options</span></el-button>
                </div>
              </el-col>
            </el-row>

            <el-container style="margin-top: -30px;padding-top: 5px;height: 800px;">
              <!-- <el-aside width="80%" style="background-color: aquamarine;"> -->
              <el-aside style="background-color: aquamarine;width: 1269px;">
                <el-container>
                  <el-header class="four_btn_area"
                    style="display: flex;align-items: center;justify-content: space-between;height: 60px;">

                    <span v-for="item in staion_set">
                      <el-button type="success" class="four_btn_area_btn" @click="station_btn_click(item)"
                        v-if="isIncluded(item, staion_set_status_eq_4)" style="background-color: red;">{{ item
                        }}</el-button>

                      <el-button type="success" class="four_btn_area_btn" @click="station_btn_click(item)" v-else>{{
                item
              }}</el-button>
                    </span>


                  </el-header>
                  <el-main>
                    <el-container style="margin-top: 0px;padding-top: 0px;">
                      <el-header style="height: 470px;width: 700px;margin-top: -10px;padding-top: 0px;">

                        <!-- <img src="../assets/station_images/a.png" alt="logo"c
                          style="margin-left: 0px;width: 1000px;height: 400px;"> -->
                        <!-- <canvas ref="canvasRef" :width="1190" :height="470" style="border: 1px solid blue;background-image: url(/src/assets/station_images/d.png);background-size:1190px 470px;"></canvas> -->

                        <canvas v-if="current_station_click == 'OP155-1' || current_station_click == 'OP155-2'"
                          ref="canvasRef" :width="1190" :height="470"
                          style="border: 1px solid blue;background-image: url(/src/assets/station_images/a.png);background-size:1190px 470px;"></canvas>
                        <canvas
                          v-else-if="current_station_click == 'OP160-1A' || current_station_click == 'OP160-1B' || current_station_click == 'OP160-2A' || current_station_click == 'OP160-2B'"
                          ref="canvasRef" :width="1190" :height="470"
                          style="border: 1px solid blue;background-image: url(/src/assets/station_images/b.png);background-size:1190px 470px;"></canvas>
                        <canvas
                          v-else-if="current_station_click == 'OP162-1A' || current_station_click == 'OP162-1B' || current_station_click == 'OP162-2A' || current_station_click == 'OP162-2B'"
                          ref="canvasRef" :width="1190" :height="470"
                          style="border: 1px solid blue;background-image: url(/src/assets/station_images/c.png);background-size:1190px 470px;"></canvas>
                        <canvas v-else="current_station_click=='OP167-1' || current_station_click=='OP167-2'"
                          ref="canvasRef" :width="1190" :height="470"
                          style="border: 1px solid blue;background-image: url(/src/assets/station_images/d.png);background-size:1190px 470px;"></canvas>

                      </el-header>
                      <el-main>
                        <el-container>
                          <el-header style="display: flex;margin: 0px; padding: 0px;height: 45px;">
                            <el-button type="danger" style="margin-left: 9px;font-size: large;height: 40px;border-radius: 10px;">
                              <span style="color: black;">Point NG</span>
                            </el-button>
                          </el-header>
                          <el-main style="height: 150px;margin: 0;padding-bottom: 0px;background-color: white;">

                            <table style="width: 100%;">
                              <thead>
                                <td>Number</td>
                                <td>Rob_No</td>
                                <td>FORCE</td>
                                <td v-if="current_station_click != 'OP167-1' && current_station_click != 'OP167-2'">
                                  STROKE</td>
                                <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">
                                  Angle</td>
                                <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">
                                  DEPTH</td>
                                <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">
                                  TORQUE</td>


                                <td>operate</td>
                              </thead>
                              <tbody>
                                <tr v-for="(item, index) in items_ng" :key="index">
                                  <td>{{ item.pos }}</td>
                                  <td>{{ item.Rob_No }}</td>
                                  <td>{{ item.FORCE }}</td>
                                  <td v-if="current_station_click != 'OP167-1' && current_station_click != 'OP167-2'">{{
                item.STROKE }}</td>
                                  <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">{{
                item.Angle }}</td>
                                  <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">{{
                item.DEPTH }}</td>
                                  <td v-if="current_station_click == 'OP167-1' || current_station_click == 'OP167-2'">{{
                item.TORQUE }}</td>
                                  <td><el-button type="danger"
                                      @click="click_modify_btn_OP167_1_OP167_2(item)">modify</el-button>
                                  </td>
                                </tr>
                              </tbody>
                            </table>

                          </el-main>
                        </el-container>
                      </el-main>
                    </el-container>


                  </el-main>
                  <!-- <el-footer
                    style="display: flex;align-items: center;background-color:bisque;margin-left: 0px;margin-bottom: 0px;padding-bottom: 0px;padding-left: 0px;">
                    <el-input v-model="textarea" style="width: 950px" placeholder="Not:" show-word-limit
                      type="textarea" />

                    <el-button type="success" class="confirm_data_btn">
                      <span style="color: #000;">
                        Confirm data
                      </span>

                    </el-button>
                  </el-footer> -->
                </el-container>

              </el-aside>
              <el-main
                style="height: auto;background-color: burlywood;padding-left: 2px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;">

                <el-container>
                  <el-header
                    style="background-color: white;margin-left: 0;padding-left: 0;display: flex;align-items:end;width: 385px;">
                    <el-button type="success" style="margin-left: 3px;font-size: large;height: 40px;border-radius: 10px;">
                      <span style="color: black;">Detail value</span>
                    </el-button>
                    <!-- <el-button type="success" style="margin-left: 9px;font-size:small;height: 20px;">
                      <span style="color: black;">{{ current_station }}</span>
                    </el-button> -->

                    <el-button v-for="item in staion_set_temp" type="success" style="margin-left: 1px;font-size:small;height: 20px;width: 60px;">
                      
                      <span v-if="isIncluded(item, staion_set_status_eq_4)" style="background-color: red;color: black;padding-left: 0px;height: 20px;width: 60px;border-radius: 5px;padding-top: 3px;">{{ item }}</span>

                      <span v-else style="color: black;padding-left: 0px;">{{ item }}</span>
                      
                    </el-button>


                  </el-header>
                  <el-main style="background-color:white;height: 720px;padding-left: 0px;width: 385px;">
                    <h2 v-for="(item, index) in items" :key="index">
                      <table class="station_table_right" v-if="item.STATUS == 4"
                        style="margin-top: 2px;background-color:	red;">
                        <tr>
                          <td class="td_left">Rob_No</td>
                          <td class="td_right">{{ item.Rob_No }}</td>
                        </tr>
                        <tr>
                          <td class="td_left">Number</td>
                          <td class="td_right">{{ item.pos }}</td>
                        </tr>

                        <tr>
                          <td class="td_left">FORCE</td>
                          <td class="td_right">{{ item.FORCE }}</td>
                        </tr>
                        <tr v-if="item.wsn != 'OP167-1' && item.wsn != 'OP167-2'">
                          <td class="td_left">STROKE</td>
                          <td class="td_right">{{ item.STROKE }}</td>
                        </tr>
                        <tr>
                          <td class="td_left">STATUS</td>
                          <td class="td_right">{{ item.STATUS }}</td>
                        </tr>
                        <!-- 一、OP167-1，OP167-2 工位少显示的字段（只有OP167-1，OP167-2多了这几个字段）  -->
                        <!-- Angle,DEPTH,TORQUE -->
                        <!-- 注意，OP167-1，OP167-2 ，没有STROKE字段 -->
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">Angle</td>
                          <td class="td_right">{{ item.Angle }}</td>
                        </tr>
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">DEPTH</td>
                          <td class="td_right">{{ item.DEPTH }}</td>
                        </tr>
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">TORQUE</td>
                          <td class="td_right">{{ item.TORQUE }}</td>
                        </tr>
                      </table>

                      <table class="station_table_right" v-else style="margin-top: 2px;">
                        <tr>
                          <td class="td_left">Rob_No</td>
                          <td class="td_right">{{ item.Rob_No }}</td>
                        </tr>
                        <tr>
                          <td class="td_left">Number</td>
                          <td class="td_right">{{ item.pos }}</td>
                        </tr>

                        <tr>
                          <td class="td_left">FORCE</td>
                          <td class="td_right">{{ item.FORCE }}</td>
                        </tr>
                        <tr v-if="item.wsn != 'OP167-1' && item.wsn != 'OP167-2'">
                          <td class="td_left">STROKE</td>
                          <td class="td_right">{{ item.STROKE }}</td>
                        </tr>
                        <tr>
                          <td class="td_left">STATUS</td>
                          <td class="td_right">{{ item.STATUS }}</td>
                        </tr>
                        <!-- 一、OP167-1，OP167-2 工位少显示的字段（只有OP167-1，OP167-2多了这几个字段）  -->
                        <!-- Angle,DEPTH,TORQUE -->
                        <!-- 注意，OP167-1，OP167-2 ，没有STROKE字段 -->
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">Angle</td>
                          <td class="td_right">{{ item.Angle }}</td>
                        </tr>
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">DEPTH</td>
                          <td class="td_right">{{ item.DEPTH }}</td>
                        </tr>
                        <tr v-if="item.wsn == 'OP167-1' || item.wsn == 'OP167-2'">
                          <td class="td_left">TORQUE</td>
                          <td class="td_right">{{ item.TORQUE }}</td>
                        </tr>

                      </table>
                    </h2>

                  </el-main>
                </el-container>
              </el-main>
            </el-container>
          </el-main>
        </el-container>

      </el-main>
    </el-container>
  </div>
  <!-- 点击修改按钮的对话框 -->
  <el-dialog v-model="dialogFormVisible" title="Repair" width="500">
    <el-form model="form_OP167_1_OP167_2">
      <el-form-item label="Number" :label-width="formLabelWidth">
        <el-input v-model="form_OP167_1_OP167_2.pos" autocomplete="off" disabled="true" />
      </el-form-item>
      <el-form-item label="Rob_No" :label-width="formLabelWidth">
        <el-input v-model="form_OP167_1_OP167_2.Rob_No" autocomplete="off" disabled="true" />
      </el-form-item>
      <el-form-item label="FORCE" :label-width="formLabelWidth">
        <el-input v-model="form_OP167_1_OP167_2.FORCE" autocomplete="off" :disabled="lock_status"/>
      </el-form-item>

      <div v-if="form_OP167_1_OP167_2.wsn != 'OP167-1' && form_OP167_1_OP167_2.wsn != 'OP167-2'">
        <el-form-item label="STROKE" :label-width="formLabelWidth">
          <el-input v-model="form_OP167_1_OP167_2.STROKE" autocomplete="off" :disabled="lock_status"/>
        </el-form-item>
      </div>

      <div v-if="form_OP167_1_OP167_2.wsn == 'OP167-1' || form_OP167_1_OP167_2.wsn == 'OP167-2'">
        <el-form-item label="Angle" :label-width="formLabelWidth">
          <el-input v-model="form_OP167_1_OP167_2.Angle" autocomplete="off" :disabled="lock_status"/>
        </el-form-item>
        <el-form-item label="DEPTH" :label-width="formLabelWidth">
          <el-input v-model="form_OP167_1_OP167_2.DEPTH" autocomplete="off" :disabled="lock_status"/>
        </el-form-item>
        <el-form-item label="TORQUE" :label-width="formLabelWidth">
          <el-input v-model="form_OP167_1_OP167_2.TORQUE" autocomplete="off" :disabled="lock_status"/>
        </el-form-item>

      </div>
      <el-form-item label="Note" :label-width="formLabelWidth">
        <el-input v-model="form_OP167_1_OP167_2.Not" autocomplete="off" />
      </el-form-item>

      {{ form_OP167_1_OP167_2.wsn }}

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button @click="clickUnlock()">
          <span v-if="lock_status == true">
            <el-icon>
              <Lock />
            </el-icon>
          </span>
          <span v-else>
            <el-icon>
              <Unlock />
            </el-icon>
          </span>


        </el-button>


        <!-- <el-button type="primary" @click="click_Confirm_btn()" :disabled="lock_status">
          Confirm
        </el-button> -->
        <el-button type="primary" @click="click_Confirm_btn()">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 输入用户名密码的弹框 -->
  <el-dialog v-model="dialogFormVisible_username_password" title="Verify the user name and password" width="500">
    <el-form :model="form_username_password">

      <el-form-item label="account" :label-width="formLabelWidth">
        <el-input v-model="form_username_password.account" autocomplete="off" name="account" />
      </el-form-item>
      <el-form-item label="password" :label-width="formLabelWidth">
        <el-input v-model="form_username_password.password" autocomplete="off" type="password"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible_username_password = false">Cancel</el-button>
        <!-- <el-button type="primary" @click="dialogFormVisible_username_password = false">
          Confirm
        </el-button> -->
        <el-button type="primary" @click="clickUnlock_verify_account_and_password()">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { useRouter } from "vue-router"
import { useCookies } from '@vueuse/integrations/useCookies'
import { showModal, toast, getPosByStationAndNumber } from "~/composables/util"
import { getUserName, removeUserName } from '~/composables/auth'

const router = useRouter()
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const dialogFormVisible_username_password = ref(false)
const lock_status = ref(true)
const formLabelWidth = '140px'
const canvasRef = ref(null)
const canvas = canvasRef.value


const app = getCurrentInstance()
const MES_IP = app.appContext.config.globalProperties.$MES_IP
const image_01_001 = app.appContext.config.globalProperties.$image_01_001
console.log(MES_IP)
console.log(image_01_001)
console.log(getPosByStationAndNumber("OP155-1", 4));

// #################### cookie ####################
const cookie = useCookies()
console.log("cookie=", cookie);
console.log("getUserName", getUserName());


// const form_OP167_1_OP167_2 = reactive({
//   ti: '',
//   Rob_No: 0.0,
//   FORCE: 0.0,
//   Angle: 0.0,
//   DEPTH: 0.0,
//   TORQUE: 0.0,
// })

function drawCircle(x, y, radius, color) {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

const form_OP167_1_OP167_2 = reactive({
  ti: '',
  Rob_No: 0.0,
  pos: 0,
  FORCE: 0.0,
  // STROKE 字段是 OP167-1，OP167-2 工位，没有的字段
  STROKE: 0.0,
  // 以下是OP167-1，OP167-2 工位 特有的3个字段
  Angle: 0.0,
  DEPTH: 0.0,
  TORQUE: 0.0,
  Not: '',
})

// 客户定义的用户名和密码 Customer defined account
const customerDefined_account = ref('admin')
const customerDefined_password = ref('Admin@123#')
// 点击锁按钮对应的弹框
const form_username_password = reactive({
  account: '',
  password: '',
})

import axios from "axios"

import { ElMessage, ElMessageBox, inputEmits, ElButton, ElDialog } from 'element-plus'
import type { Action } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'

const items = ref([]);
const items_1 = ref([]);
const items_2 = ref([]);
const items_3 = ref([]);
const items_4 = ref([]);
const items_ng = ref([]);
const item_modify = ref([]);


const psnValue = ref('')
const current_station = ref('All')
// 点击某一个工位，存储工位信息，在NG区域用作字段显示判断依据
const current_station_click = ref('')
const current_station_plc_triggering_time = ref('')
// const dialogFormVisible = ref(false)

const staion_set = ref(new Set()); // 创建一个空的响应式集合
const staion_set_temp = ref(new Set()); // 创建一个空的响应式集合  用作Detail value右边显示
const staion_set_status_eq_4 = ref(new Set()); // 创建一个空的响应式集合,存储STATUS =4的工位

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})




function convertNanoTimeToDate(nanoseconds) {
  // 转换为毫秒
  var milliseconds = nanoseconds / 1000000;

  // 使用Date对象转换为本地时间字符串
  var date = new Date(milliseconds);
  var year = date.getFullYear();
  var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
  var day = ('0' + date.getDate()).slice(-2);
  var hours = ('0' + date.getHours()).slice(-2);
  var minutes = ('0' + date.getMinutes()).slice(-2);
  var seconds = ('0' + date.getSeconds()).slice(-2);

  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}

const onSubmit = () => {
  console.log('submit!')
  // console.log($MES_IP);
  lock_status.value = true

  // 清空数组
  items_ng.value.splice(0)
  current_station_plc_triggering_time.value = ""
  console.log("current_station_plc_triggering_time=", current_station_plc_triggering_time);


  // const timestamp = 1708489032433418000;
  // const date = new Date(timestamp);
  // const formattedDate = date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
  // console.log(formattedDate);
  // 示例使用 "1711012435512579300"
  var nanoseconds = 1711012435512579300; // 假设这是一个纳秒级时间戳
  var dateString = convertNanoTimeToDate(nanoseconds);
  console.log(dateString); // 输出转换后的日期时间字符串

  var psn = psnValue.value
  console.log(psn)
  if (!psn) {
    // alert("请输入条码")
    ElMessageBox.alert('Please enter barcode', 'warning', {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: 'OK',
      callback: (action: Action) => {
        ElMessage({
          type: 'warning',
          message: `action: ${action}`,
        })
      },
    })

    return;
  }

  // // 清空NG点数组
  // items_ng.value.splice(0)
  // console.log(inputElement)
  axios.post(MES_IP + "/timedb/get", {
    "n": "OP150-167",
    "tm": true,
    "obj": "*",
    "opt": {
      "and": [
        {
          "eq": "psn", "v": psn
        }
      ]
    }
  })
    .then(function (response) {
      console.log("请求成功")
      console.log(response)
      console.log(response.data["OP150-167"]["data"])
      // console.log(response.data["OP150-167"]["data"]["2"]["Rob_No"])
      // console.log(response.data["OP150-167"]["data"]["2"]["FORCE"])
      // console.log(response.data["OP150-167"]["data"]["2"]["STROKE"])

      items.value = response.data["OP150-167"]["data"]
      // 工位集合使用之前先清空，以防有缓存
      staion_set.value.clear()

      items.value.forEach((item, i) => {
        // console.log("", item.wsn, i)
        staion_set.value.add(item.wsn)

      });
      console.log(staion_set.value)
      // 不需要显示的工位
      staion_set.value.delete("OP150-1")
      staion_set.value.delete("OP150-2")

      staion_set.value.delete("OP164-1")
      staion_set.value.delete("OP164-2")

      staion_set.value.delete("OP165-1")
      staion_set.value.delete("OP165-2")

      staion_set.value.delete("OP166-1")
      staion_set.value.delete("OP166-2")
      console.log("删除不需要显示的工位之后")
      console.log(staion_set.value)

      staion_set_temp.value.clear()
      staion_set.value.forEach((item, i) => {

        staion_set_temp.value.add(item)
      });


      current_station.value = ""
      staion_set.value.forEach((item, i) => {

        current_station.value += item + " "
      });


      items.value.forEach((item, i) => {

        if (item.wsn == "OP150-1") {
          console.log("wsn=OP150-1", i)
          items.value.splice(i, 1)
        }
      });
      items.value.forEach((item, i) => {

        if (item.wsn == "OP150-2") {
          console.log("wsn=OP150-2", i)
          items.value.splice(i, 1)
        }
      });

      // 清空集合
      // staion_set_status_eq_4
      staion_set_status_eq_4.value.clear()
      items.value.forEach((item, i) => {
        // console.log(item.wsn, i)

        if (item.STATUS == 4) {
          staion_set_status_eq_4.value.add(item.wsn)
        }
      });

      console.log("有STATUS=4的工位", staion_set_status_eq_4.value)


    }, function (err) {
      console.log("请求失败")

      ElMessageBox.alert('Please enter the correct barcode', 'Warning', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
          ElMessage({
            type: 'info',
            message: `action: ${action}`,
          })
        },
      })
    })
}

function isIncluded(value, arr) {
  return arr.has(value)
}

// 点击工位按钮，获取指定工位
function station_btn_click(text) {
  // alert(`You clicked the button with text: ${text}`)
  console.log("画圈");

  getByPsnAndStation(text)
  getByPsnAndStationAndStatusEqu4(text)
  current_station_click.value = text

  staion_set_temp.value.clear()
  staion_set_temp.value.add(text)
  // this.staion_set_temp.clear()

}

function getByPsnAndStation(my_station) {
  console.log("getByPsnAndStation")
  // 清空数组
  items_ng.value.splice(0)
  console.log(my_station)
  current_station.value = my_station

  var psn = psnValue.value
  console.log(psn)

  // console.log(inputElement)
  axios.post(MES_IP + "/timedb/get", {
    "n": "OP150-167",
    "tm": true,
    "obj": "*",
    "opt": {
      "and": [
        {
          "eq": "psn", "v": psn
        },
        {
          "eq": "wsn", "v": my_station
        }
      ]
    }
  })
    .then(function (response) {
      console.log("请求成功")
      console.log(response.data["OP150-167"]["data"])

      items.value = response.data["OP150-167"]["data"]

      var nanoseconds = parseInt(response.data["OP150-167"]["data"]["0"]["time"])
      console.log("nanoseconds=", nanoseconds)
      current_station_plc_triggering_time.value = convertNanoTimeToDate(nanoseconds)
      console.log("current_station_plc_triggering_time.value=", current_station_plc_triggering_time.value)

    }, function (err) {
      console.log("请求失败")

      ElMessageBox.alert('请输入正确的条码', '提示', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
          ElMessage({
            type: 'info',
            message: `action: ${action}`,
          })
        },
      })
    })


}

function getByPsnAndStationAndStatusEqu4(my_station) {
  console.log("getByPsnAndStationAndStatusEqu4")
  // 清空数组
  items_ng.value.splice(0)
  console.log(my_station)
  current_station.value = my_station

  var psn = psnValue.value
  console.log(psn)

  // console.log(inputElement)
  axios.post(MES_IP + "/timedb/get", {
    "n": "OP150-167",
    "tm": true,
    "obj": "*",
    "opt": {
      "and": [
        {
          "eq": "psn", "v": psn
        },
        {
          "eq": "wsn", "v": my_station
        },
        {

          "eq": "STATUS", "v": 4
        }
      ]
    }
  })
    .then(function (response) {
      console.log("getByPsnAndStationAndStatusEqu4->请求成功")
      console.log(response.data["OP150-167"]["data"])

      items_ng.value = response.data["OP150-167"]["data"]

      // 根据 STATUS=4 在图上显示红点
      items_ng.value.forEach((item, i) => {
        drawCircle(getPosByStationAndNumber(item.wsn, item.pos)[0], getPosByStationAndNumber(item.wsn, item.pos)[1], 10, "red")
      })



    }, function (err) {
      console.log("getByPsnAndStationAndStatusEqu4->请求失败or没有ng数据")

      // ElMessageBox.alert('请输入正确的条码', '提示', {
      //   // if you want to disable its autofocus
      //   // autofocus: false,
      //   confirmButtonText: 'OK',
      //   callback: (action: Action) => {
      //     ElMessage({
      //       type: 'info',
      //       message: `action: ${action}`,
      //     })
      //   },
      // })
    })


}

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// import { ref } from 'vue'
// const input = ref('')


const tableData = [
  // {
  //  tableData_key: '1_Cur_rent',
  //  tableData_value: '133.5',
  //},
]

const textarea = ref('')

// 退出主页逻辑
function click_exit_to_login() {

  // ElMessageBox.confirm(
  //   '确定要退出返修界面吗？',
  //   'Warning',
  //   {
  //     confirmButtonText: '确认',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   }


  // )
  //   .then(() => {

  //     console.log("111", getUserName());
  //     removeUserName()
  //     console.log("222", getUserName());
  //     ElMessage({
  //       type: 'success',
  //       message: '退出成功',
  //     })

  //     router.push("/login")
  //   })
  //   .catch(() => {
  //     ElMessage({
  //       type: 'info',
  //       message: '取消退出',
  //     })
  //   })
  console.log("111", getUserName());
  removeUserName
  console.log("222", getUserName());
  router.push("/login")

}


const click_exit_btn = () => {
  ElMessageBox.confirm(
    '确定要退出返修界面吗？',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      ElMessage({
        type: 'success',
        message: '退出成功',
      })
      router.push("/login")
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消退出',
      })
    })
}

// 点击修改按钮
function click_modify_btn_OP167_1_OP167_2(item) {

  // this.dialogFormVisible_username_password = true

  console.log("click_modify_btn");
  console.log(item);
  console.log(typeof (item));
  // this.form_OP167_1_OP167_2.clear
  // this.form_OP167_1_OP167_2 = item
  this.form_OP167_1_OP167_2.wsn = item.wsn
  this.form_OP167_1_OP167_2.psn = item.psn
  this.form_OP167_1_OP167_2.time = item.time

  this.form_OP167_1_OP167_2.ti = item.ti
  this.form_OP167_1_OP167_2.Rob_No = item.Rob_No
  this.form_OP167_1_OP167_2.pos = item.pos
  this.form_OP167_1_OP167_2.FORCE = item.FORCE

  if (item.wsn != 'OP167-1' && item.wsn != 'OP167-2') {
    this.form_OP167_1_OP167_2.STROKE = item.STROKE
  }

  if (item.wsn == 'OP167-1' || item.wsn == 'OP167-2') {
    this.form_OP167_1_OP167_2.Angle = item.Angle
    this.form_OP167_1_OP167_2.DEPTH = item.DEPTH
    this.form_OP167_1_OP167_2.TORQUE = item.TORQUE
  }


  this.dialogFormVisible = true
}
// 点击Confirm 按钮
function click_Confirm_btn() {
  console.log("click_Confirm_btn");
  // console.log(item);
  this.dialogFormVisible = false

  console.log("修改之后的对象", this.form_OP167_1_OP167_2);
  modify_OP167_1_OP167_2(this.form_OP167_1_OP167_2)
}

function modify_OP167_1_OP167_2(item_current) {
  console.log("modify_OP167_1_OP167_2");
  console.log(item_current);
  console.log("ti=", item_current.ti);
  console.log("wsn=", item_current.wsn);
  console.log("psn=", item_current.psn);
  console.log("time=", item_current.time);

  if (item_current.wsn != 'OP167-1' && item_current.wsn != 'OP167-2') {
    axios.post(MES_IP + "/timedb/md", {
      "n": "OP150-167",
      "data": [{
        "tm": item_current.time,
        "k": {
          "line": "dcs",
          "ti": item_current.ti,
          "wsn": item_current.wsn,
          "psn": item_current.psn
        },
        "v": {
          "FORCE": parseFloat(item_current.FORCE),
          "STROKE": parseFloat(item_current.STROKE),
          "STATUS": 2
        }
      }]
    })
      .then(function (response) {
        console.log("修改成功")
        console.log(response)

        form_OP167_1_OP167_2.clear
        export_not_op167(item_current.wsn,
          item_current.psn, current_station_plc_triggering_time,
          item_current.ti,
          item_current.Rob_No,
          item_current.pos,
          item_current.FORCE,
          item_current.STROKE,
          item_current.Not)

      }, function (err) {
        console.log("修改失败")
        console.log(err)
      })
  }

  if (item_current.wsn == 'OP167-1' || item_current.wsn == 'OP167-2') {
    axios.post(MES_IP + "/timedb/md", {
      "n": "OP150-167",
      "data": [{
        "tm": item_current.time,
        "k": {
          "line": "dcs",
          "ti": item_current.ti,
          "wsn": item_current.wsn,
          "psn": item_current.psn
        },
        "v": {
          "FORCE": parseFloat(item_current.FORCE),
          "Angle": parseFloat(item_current.Angle),
          "DEPTH": parseFloat(item_current.DEPTH),
          "TORQUE": parseFloat(item_current.TORQUE),
          "STATUS": 2
        }
      }]
    })
      .then(function (response) {
        console.log("modify_OP167_1_OP167_2->修改成功")
        console.log(response)
        form_OP167_1_OP167_2.clear
        export_op167(item_current.wsn, item_current.psn, current_station_plc_triggering_time, item_current.ti, item_current.Rob_No, item_current.pos, item_current.FORCE, item_current.Angle, item_current.DEPTH,
          item_current.TORQUE, item_current.Not)
      }, function (err) {
        console.log("modify_OP167_1_OP167_2->修改失败")
        console.log(err)
      })
  }


}

// 写Excel OP167_1 OP167_2
function export_op167(wsn, psn, time, ti, Rob_No, pos, FORCE, Angle, DEPTH, TORQUE, Not) {
  console.log("写Excel export_op167")
  // axios.post("http://localhost:9000", {
  //   "wsn": wsn,
  //   "psn": psn,
  //   "time": time.value,
  //   "ti": ti,
  //   "Rob_No": Rob_No,
  //   "FORCE": FORCE,
  //   "Angle": Angle,
  //   "DEPTH": DEPTH,
  //   "TORQUE": TORQUE,
  //   "Not": Not
  // })

  axios({
    method: 'post',
    url: 'http://localhost:9000',
    headers: {
      'Content-Type': 'application/json'
    },
    data: {
      "wsn": wsn,
      "psn": psn,
      "time": time.value,
      "ti": ti,
      "Rob_No": Rob_No,
      "pos": pos,
      "FORCE": FORCE,
      "Angle": Angle,
      "DEPTH": DEPTH,
      "TORQUE": TORQUE,
      "Not": Not,
      "username": getUserName()
    }
  })
    .then(function (response) {
      console.log("导出本地Excel成功")

    }, function (err) {
      console.log("导出本地Excel失败")
      console.log(err)
    })
}

// 写Excel 非OP167_1 OP167_2
function export_not_op167(wsn, psn, time, ti, Rob_No, pos, FORCE, STROKE, Not) {
  console.log("写Excel export_op167")
  // axios.post("http://localhost:9000", {
  //   "wsn": wsn,
  //   "psn": psn,
  //   "time": time.value,
  //   "ti": ti,
  //   "Rob_No": Rob_No,
  //   "FORCE": FORCE,
  //   "STROKE": STROKE,
  //   "Not": Not
  // })

  axios({
    method: 'post',
    url: 'http://localhost:9000',
    headers: {
      'Content-Type': 'application/json'
    },
    data: {
      "wsn": wsn,
      "psn": psn,
      "time": time.value,
      "ti": ti,
      "Rob_No": Rob_No,
      "pos": pos,
      "FORCE": FORCE,
      "STROKE": STROKE,
      "Not": Not,
      "username": getUserName()
    }
  })
    .then(function (response) {
      console.log("导出本地Excel成功")

    }, function (err) {
      console.log("导出本地Excel失败")
      console.log(err)
    })
}

// import { ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'Do you confirm the exit?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      console.log("111", getUserName());
      removeUserName()
      console.log("222", getUserName());
      // 跳转到登录页 
      router.push("/login")

      ElMessage({
        type: 'success',
        message: 'exit completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'exit canceled',
      })
    })
}

function clickClear() {
  console.log("clickClear");
  psnValue.value = ""
  current_station_plc_triggering_time.value = ""
}

function clickUnlock() {
  console.log("clickUnlock");
  this.form_username_password.account = ""
  this.form_username_password.password = ""

  this.dialogFormVisible_username_password = true
}

function clickUnlock_verify_account_and_password() {
  console.log("clickUnlock_verify_account_and_password");
  console.log("customerDefined_account=", customerDefined_account.value);
  console.log("customerDefined_password=", customerDefined_password.value);

  console.log("form_username_password.account=", this.form_username_password.account);
  console.log("form_username_password.password=", this.form_username_password.password);

  if (this.form_username_password.account == customerDefined_account.value && this.form_username_password.password == customerDefined_password.value) {
    console.log("clickUnlock_verify_account_and_password 验证通过");
    this.lock_status = false
    this.dialogFormVisible_username_password = false
  } else {
    console.log("clickUnlock_verify_account_and_password 验证失败");
    ElMessageBox.alert('Please enter the correct account number and password', 'warning', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
          ElMessage({
            type: 'warning',
            message: `action: ${action}`,
          })
        },
      })
  }

}



</script>

<style lang="scss" scoped>
#app {
  padding: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
}

body {
  min-height: auto;

}

.head {

  background-color: red;
}

.main {
  background-color: blue;

}

.f-header {
  //@apply flex items-center bg-sky-700 text-light-50 fixed top-0 left-0 right-0;
  @apply flex items-center text-light-50 fixed top-0 left-0 right-0;
  background-color: #5B9BD5;
  height: 64px;
}

.logo {
  width: 250px;
  @apply flex justify-center items-center text-xl font-thin;
}

.exit {
  width: 90px;
  height: 45px;
  margin-left: 10px;
  @apply bg-sky-900;
}

.station_btn {
  width: 100px;
  height: 50px;
  margin-top: 10px;
  margin-left: -30px;
  background-color: #718022ad;
}

.el-menu-item {
  margin-top: 10px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.search_btn {
  height: 70px;
  width: 100%;
  margin-left: 0;
  border-radius: 10px;

}

.clear_options_btn {
  height: 70px;
  width: 100%;
  margin-left: 0;
  border-radius: 10px;
}

.four_btn_area_btn {
  width: 160px;
  height: 50px;
  border-radius: 10px;
}

.confirm_data_btn {
  width: 160px;
  height: 60px;
  margin-left: 20px;

  @apply bg-sky-700;
}

.point_ng_area input {
  border-radius: 5px;
  border-color: #272424;
  border: 2px solid;
}

.station_table_right {
  border: 5px solid #718022ad;
  width: 100%;

}


th,
td {
  border: 2px solid #718022ad;
  /* 单元格边框为虚线 */
  border-right: 1px solid #718022ad;
}

.td_left {
  width: 100px;
  text-align: left;
}

.td_right {
  width: 300px;
  text-align: left;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
</style>